<template>
  <div class="containerck">
    <div class="popupck">
        <button type="button" class="close" @click="closeycfx">x</button>
        <div class="content">
    <div class="bbody">
        <div class="head">
            <span class="colorg"><router-link class="rlink" to="/">首页</router-link></span>
            <span class="colorg" style="margin-left: 10px;">></span>
            <span style="margin-left: 10px;">足球预测分析</span>
        </div>
        <div class="tblist">
            <div class="box1">
                <div class="box2">
                    <div class="time colorg2">{{ analyselist.matchSort }}</div>
                    <div class="timeb pd10">
                        <div class="zqd pd10"><img class="qdimg" style="right: 0;" :src="analyselist.zranksPhoto" alt=""></div>
                        <div class="zqd2">
                            <div class="fcenter pd40 font-s15">{{ analyselist.zName }}</div>
                            <!-- <div class="fcenter">2</div> -->
                        </div>
                        <div class="vs">
                            <div class="fcenter colorg3">{{ analyselist.matchRound }}轮</div>
                            <div class="fcenter pd10">VS</div>
                            <!-- <div class="fcenter">:</div> -->
                        </div>
                        <div class="yqd2">
                            <div class="fcenter pd40 font-s15">{{ analyselist.kName }}</div>
                            <!-- <div class="fcenter">1</div> -->
                        </div>
                        <div class="yqd pd10"><img class="qdimg" :src="analyselist.kranksPhoto" alt=""></div>
                    </div>
                </div>
            </div>
            <!-- <div class="jslist">
                <div class="jsfx coloro">技术分析</div>
                <div class="fxx">{{ analyselist.analysis }}</div>
            </div> -->
            <div class="jslist">
                <div class="jsfx coloro">总结</div>
                <div class="fxx">{{ analyselist.advantageEvaluate }}</div>
            </div>
        </div>
    </div>
    </div>
    </div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      analyselist:'',
      lianxi:''
    }
  },
  created() {
    this.lianxi = JSON.parse(window.localStorage.getItem('lianxi'))
    // this.analyselist = this.$route.query.anaone
    this.analyselist = JSON.parse(window.localStorage.getItem('anaone'))
    console.log('就是这里')
    console.log(this.analyselist)
    if(this.analyselist == undefined) {
      console.log('测试这里')
      this.huoqu()
    }
  },
  mounted() {
    this.lianxi = JSON.parse(window.localStorage.getItem('lianxi'))
    // this.analyselist = this.$route.query.anaone
    this.analyselist = JSON.parse(window.localStorage.getItem('anaone'))
    console.log('就是这里')
    console.log(this.analyselist)
    if(this.analyselist == undefined) {
      console.log('测试这里')
      this.huoqu()
    }
  },
  methods: {
      closeycfx (){
        clearInterval(this.timer); 
   this.timer = null;
      this.$emit('closeycfx')
    },
    async huoqu() {
       var yhid = JSON.parse(window.localStorage.getItem('yhid'))
       var fxid = JSON.parse(window.localStorage.getItem('fxid'))
      var xiangqin1 = new FormData
      xiangqin1.set('userId',yhid)
      xiangqin1.set('analysisId',fxid)
      const { data:res } = await this.$http.post('/app/zqMatchAnalysis/get', xiangqin1)
      this.analyselist = res.data
      console.log(res)
    }
  }
}
</script>

<style lang="less">
@import "../../assets/css/index.css";
.actived{
    position: relative;
    border: 1px solid red !important;
}
.actived:after{
content: '';
background: url('../../assets/img/duigou.png') no-repeat bottom right;
position: absolute;
width: 45px;
height: 45px;
bottom: 0;
right: 0;
}
  .containerck {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.3);
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .popupck {
    background: #FFFFFF;
    height: 500px;
    width: 620px;
  }
  .close {
      width: 30px;
      height: 30px;
      font-size: 25px;
      color: #999999;
      background-color: #fff;
      border: 0;
      position: relative;
      left: 590px;
      top: 0;
  }
  .bodyck {
      width: 96.3%;
      height: 100%;
      .seeck {
          text-align: center;
      }
      .moneyck {
          color: #EA2929;
          font-weight: bold;
          text-align: center;
          margin-top: 15px;
      }
      .pay {
          position: relative;
          width: 70%;
          height: 80px;
          margin: 40px auto;
          .kuang {
              position: absolute;
              height: 80px;
              width: 200px;
              line-height: 80px;
              text-align: center;
          }
      }
      .ewm {
          position: relative;
          width: 70%;
          margin: 40px auto;
          height: 280px;
          .ewmbox {
              position: absolute;
              height: 280px;
              width: 180px;
              line-height: 280px;
              text-align: center;
              .ewmboxm {
                  position: absolute;
                  top: 40px;
                  width: 140px;
                  height: 140px;
              }
              .zfbox {
                  position: absolute;
                  top: 200px;
                  width: 120px;
                  height: 40px;
                  text-align: center;
                  line-height: 40px;
              }
          }
      }
      .yezf {
          margin-top: 80px;
          width: 100%;
          height: 40px;
          .qrzf {
              margin: 0 auto;
              height: 40px;
              width: 200px;
              text-align: center;
              line-height: 40px;
              background-color: #FF3900;
              color: #fff;
          }
      }
  }

  .lbox {
      left: 0px;
  }
  .rbox {
      right: 0px;
  }
  .meixuan {
      border: 1px solid #DCDCDC;
  }
//   .meixuan:hover {
//       border: 1px solid #FF3900;
//   }
  .meixuan:visited {
      border: 1px solid #FF3900;
  }
  .xuanle {
      border: 1px solid #FF3900;
  }
  .duigou {
      position: absolute;
      right: 0px;
      bottom: 0px;
  }
  .wxb {
      border: 1px solid #09BB07;
  }
  .zfbb {
      border: 1px solid#06B4FD;
  }
  .left20 {
      left: 20px;
  }
  .right20 {
      right: 20px;
  }
  .ewmimg {
      width: 135px;
      height: 135px;
      line-height: 135px;
      margin-bottom: 10px;
  }
  .payicon {
      width: 25px;
      height: 25px;
  }





  .content {
    width: 80%;
    margin-left: 50px;
  .bbody {
      height: 70%;
      width: 100%;
      background-color: #fff;
      .head {
        height: 50px;
        padding-left: 25px;
        line-height: 50px;
        border-bottom: 1px solid #EEEEEE;
      }
      .tblist {
          margin-top: 10px;
          .box1 {
              width: 100%;
              height: 140px;
            //   background-color: pink;
              .box2 {
                width: 70%;
                height: 140px;
                // background-color: red;
                margin: 0 auto;
                .time {
                    text-align: center;
                }
                .timeb {
                    position: relative;
                    width: 100%;
                    height: 100px;
                    // background-color: #fff;
                    margin: 0 auto;
                    .zqd {
                        position: absolute;
                        width: 60px;
                        height: 60px;
                    }
                    .zqd2 {
                        position: absolute;
                        width: 100px;
                        height: 80px;
                        left: 70px;
                    }
                    .vs {
                        position: absolute;
                        width: 100px;
                        height: 80px;
                        left: 50%;
                        transform: translateX(-40px);
                        
                    }
                    .yqd {
                        position: absolute;
                        width: 60px;
                        height: 60px;
                        right: 0;
                    }
                    .yqd2 {
                        position: absolute;
                        width: 100px;
                        height: 80px;
                        right: 60px;
                    }
                }
              }
          }
          .jslist {
            width: 95%;
            margin: 20px auto;
            // background-color: pink;
            .jsfx {
                height: 40px;
                line-height: 40px;
                padding-left: 20px;
                background-color: #F6F6F6;
            }
            .fxx {
                // height: 300px;
                padding: 20px;
                border: 1px solid#F6F6F6;
            }
          }
      }
  }
  }

.qdimg {
    position: absolute;
    margin-top: 15px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
}
.fcenter {
    text-align: center;
}


.div-inline{ display:inline-block} 

#nav {
  margin-top: 20px;
  text-align: center;
  width: 100%;
  height: 50px;
  background:rgba(0,0,0,0.1);
}

.database {
  width: 100px;
  height: 50px;
  text-align:center;
  line-height: 50px;
  margin-left: 50px;
  padding-right: 20px;
  font-size: 20px;
  color: #FFFFFE;
}

.list {
  width: 70px;
  height: 50px;
  text-align:center;
  line-height: 50px;
  margin-left: 45px;
  color: #FFFFFE;
}


.fleft {
  float: left;
}

.bottom {
  position: relative;
  bottom: 0;
  color: #FFFFFF;
  height: 100px;
  width: 100%;
  background-color: #191C21;
}
.gg {
  position: absolute;
  margin-left: 25%;
  margin-top: 20px;
}
.right0 {
  margin-left: 70px;
}
.bbt {
  margin-top: 10px;
}

</style>